<template>
  <MetaSearch v-if="showsearch" />
  <CategoryTags v-model="activeTag"></CategoryTags>
  <AllCards :urls="showurls" :in-all="!activeTag"></AllCards>
  <n-card title="过去的收藏，或许能淘到有用的东西" style="width: 90%; margin: 8px 5%">
    <alllinks />
  </n-card>
  <WidgetMovie></WidgetMovie>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useStorage } from '@vueuse/core'
import Alllinks from '../components/alllinks.vue'
import { getData } from '../utils/api'
import AllCards from './AllCards/AllCards.vue'
import CategoryTags from './tags/CategoryTags.vue'
import { useSites } from '@/stores/sites'

const sitesStore = useSites()
getData().then((res) => {
  sitesStore.sites = res.sites
  sitesStore.tags = res.tags
})

const showsearch = useStorage('showsearch', true)

const activeTag = ref()
const showurls = computed(() => {
  if (!activeTag.value) return sitesStore.sites
  return sitesStore.sites.filter((item) => item.tags.includes(activeTag.value))
})
</script>
